<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>小签科技</title>

  <!-- Set render engine for 360 browser -->
  <meta name="renderer" content="webkit">

  <!-- No Baidu Siteapp-->
  <meta http-equiv="Cache-Control" content="no-siteapp"/>

  <link rel="icon" type="image/png" href="assets/i/favicon.png">

  <!-- Add to homescreen for Chrome on Android -->
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" sizes="192x192" href="assets/i/favicon.png">

  <!-- Add to homescreen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="小签科技"/>
  <link rel="apple-touch-icon-precomposed" href="assets/i/favicon.png">

  <!-- Tile icon for Win8 (144x144 + tile color) -->
  <meta name="msapplication-TileImage" content="assets/i/favicon.png">
  <meta name="msapplication-TileColor" content="#0e90d2">

  <link rel="stylesheet" href="assets/css/amazeui.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
  <link rel="stylesheet" href="assets/css/animate.min.css">
  <link rel="stylesheet" href="assets/css/amazeui.videojs.css">
  <link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<!-- 导航 -->
<header class="am-topbar am-topbar-fixed-top xs-topbar">
  <h1 class="am-topbar-brand">
    <a href="#" class="am-text-ir">小签科技</a>
  </h1>

  <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>

  <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">
    <ul class="am-nav am-nav-pills xs-topbar-nav">
      <li class="am-active"><a href="#">首页</a></li>
      <li><a href="#">解决方案</a></li>
      <li><a href="#">开发平台</a></li>
      <li><a href="#">合伙人计划</a></li>
      <li><a href="#">了解小签</a></li>
    </ul>
  </div>
</header>

<!-- 轮播 -->
<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <img src="assets/image/banner1.jpg" alt="" class="am-img-responsive ani" swiper-animate-effect="slideInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0s" >
      <div class="banner1-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.3s" data-am-modal="{target: '#video', closeViaDimmer: 0, width: 640, height: 364}">
        <img src="assets/image/banner1_icon1.png" alt="" class="am-img-responsive">
      </div>
      <div class="banner1-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.6s">
        <img src="assets/image/banner1_icon2.png" alt="" class="am-img-responsive">
      </div>
    </div>
    <div class="swiper-slide">
      <img src="assets/image/banner2.jpg" alt="" class="am-img-responsive ani" swiper-animate-effect="slideInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0s">
      <div class="banner2-1 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="1.2s">
        <img src="assets/image/banner2_icon1.png" alt="" class="am-img-responsive">
      </div>
      <div class="banner2-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.9s">
        <img src="assets/image/banner2_icon2.png" alt="" class="am-img-responsive">
      </div>
      <div class="banner2-3 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.6s">
        <img src="assets/image/banner2_icon3.png" alt="" class="am-img-responsive">
      </div>
      <div class="banner2-4 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay="0.3s">
        <p class="am-text-xxxl">AR + 出行 </p>
        <p class="am-text-xxl">从文字到体验，AR出行时代全面到来</p>
        <p class="info">景区景点，展馆展览，文创旅游，智慧城市全面AR化</p>
      </div>
    </div>
    <div class="swiper-slide">
      <img src="assets/image/banner3.jpg" alt="" class="am-img-responsive ani" swiper-animate-effect="slideInUp" swiper-animate-duration="0.3s" swiper-animate-delay="0s">
      <div class="banner3-1 ani" swiper-animate-effect="slideInUp-x" swiper-animate-duration="3s" swiper-animate-delay="0s">
        <img src="assets/image/banner3_icon.png" alt="" class="am-img-responsive">
      </div>
      <div class="banner3-2 ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
        <p class="am-text-xl">全球出行目地流量入口， <br> AR出行合伙人火热招聘中！</p>
        <p class="info">合伙人热线：+86 0592 3558856</p>
      </div>
    </div>
  </div>
  <!-- 如果需要分页器 -->
  <ul class="swiper-pagination"></ul>
</div>

<!-- 栏目-1 -->
<div class="xs-hot bg-white"  data-am-scrollspy="{animation: 'slide-bottom'}">
  <div class="am-g am-g-fixed">
    <div class="am-u-sm-10 am-u-sm-centered">
      <div class="am-g am-g-collapse">
        <div class="am-u-sm-6">
          <img src="assets/image/column1.png" alt="" class="am-img-responsive">
          <div class="column1-1" data-am-scrollspy="{animation: 'spin-left'}">
            <img src="assets/image/column1-1.png" alt="" class="am-img-responsive">
          </div>
          <div class="column1-2" data-am-scrollspy="{animation: 'slide-right',delay: 300}">
            <img src="assets/image/column1-2.png" alt="" class="am-img-responsive">
          </div>
          <div class="column1-3">
            <img src="assets/image/column1-3.png" alt="" class="am-img-responsive">
          </div>
          <div class="column1-4">
            <img src="assets/image/column1-4.png" alt="" class="am-img-responsive">
          </div>
        </div>
        <div class="am-u-sm-6">
          <div class="am-g am-g-collapse">
            <div class="am-u-sm-10 am-u-sm-offset-2 xs-hot-box">
              <h1 class="title am-text-right">告别导游和语音， <br> 小签AR带你看世界！</h1>

              <div class="am-g am-g-collapse">
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 300}">
                  <img src="assets/image/planning.png" alt="" class="icon-img am-img-responsive">
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 600}">
                  <img src="assets/image/route.png" alt="" class="icon-img am-img-responsive">
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 900}">
                  <img src="assets/image/ar.png" alt="" class="icon-img am-img-responsive">
                </div>
              </div>
              <div class="am-g am-g-collapse">
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 300}">
                  <p class="text">规划行程</p>
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 600}">
                  <p class="text">路线管理</p>
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 900}">
                  <p class="text">AR打卡</p>
                </div>
              </div>

              <div class="am-g am-g-collapse">
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 1200}">
                  <img src="assets/image/planning.png" alt="" class="icon-img am-img-responsive">
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 1500}">
                  <img src="assets/image/route.png" alt="" class="icon-img am-img-responsive">
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 1800}">
                  <img src="assets/image/ar.png" alt="" class="icon-img am-img-responsive">
                </div>
              </div>
              <div class="am-g am-g-collapse">
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 1200}">
                  <p class="text">规划行程</p>
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 1500}">
                  <p class="text">路线管理</p>
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 1800}">
                  <p class="text">AR打卡</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 栏目-2 -->
<div class="xs-hot" data-am-scrollspy="{animation: 'slide-bottom'}" id="column2-1">
  <div class="am-g am-g-fixed">
    <div class="am-u-sm-10 am-u-sm-centered">
      <div class="am-g am-g-collapse">
        <div class="am-u-sm-6">
          <div class="am-g am-g-collapse">
            <div class="am-u-sm-10 am-u-sm-offset-2 xs-hot-box">
              <h1 class="title am-text-left">AR路线玩起来，景点 <br> 变身游乐场，文化娱乐两不误！</h1>

              <div class="am-g am-g-collapse">
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 300}">
                  <img src="assets/image/multiple.png" alt="" class="icon-img am-img-responsive">
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 600}">
                  <img src="assets/image/weChat.png" alt="" class="icon-img am-img-responsive">
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 900}">
                  <img src="assets/image/gps.png" alt="" class="icon-img am-img-responsive">
                </div>
              </div>
              <div class="am-g am-g-collapse">
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 300}">
                  <p class="text">多条AR路线玩法</p>
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 600}">
                  <p class="text">多种AR互动形式</p>
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 900}">
                  <p class="text">实景AR导航</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="am-u-sm-6">
          <img src="assets/image/column2.png" alt="" class="am-img-responsive">
          <div class="column2-1" id="column-gif">
          </div>
          <div class="column2-2" data-am-scrollspy="{animation: 'slide-top', delay: 100}">
            <img src="assets/image/column2-2.png" alt="" class="am-img-responsive">
          </div>
          <div class="column2-3" data-am-scrollspy="{animation: 'slide-left', delay: 300}">
            <img src="assets/image/column2-3.png" alt="" class="am-img-responsive">
          </div>
          <div class="column2-4" data-am-scrollspy="{animation: 'slide-bottom', delay: 600}">
            <img src="assets/image/column2-4.png" alt="" class="am-img-responsive">
          </div>
          <div class="column2-5" data-am-scrollspy="{animation: 'slide-bottom', delay: 900}">
            <img src="assets/image/column2-5.png" alt="" class="am-img-responsive">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 栏目-3 -->
<div class="xs-hot bg-white" data-am-scrollspy="{animation: 'slide-bottom'}">
  <div class="am-g am-g-fixed">
    <div class="am-u-sm-10 am-u-sm-centered">
      <div class="am-g am-g-collapse">
        <div class="am-u-sm-6">
          <img src="assets/image/column3.png" alt="" class="am-img-responsive">
          <div class="column3-1" data-am-scrollspy="{animation: 'slide-top-bottom'}">
            <img src="assets/image/column3-1.png" alt="" class="am-img-responsive">
          </div>

        </div>
        <div class="am-u-sm-6">
          <div class="am-g am-g-collapse">
            <div class="am-u-sm-10 am-u-sm-offset-2 xs-hot-box">
              <h1 class="title am-text-right">小签AR开放平台，<br> 制作自己家乡的AR路线！</h1>

              <div class="am-g am-g-collapse">
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 300}">
                  <img src="assets/image/marking.png" alt="" class="icon-img am-img-responsive">
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 600}">
                  <img src="assets/image/towed.png" alt="" class="icon-img am-img-responsive">
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 900}">
                  <img src="assets/image/material.png" alt="" class="icon-img am-img-responsive">
                </div>
              </div>
              <div class="am-g am-g-collapse">
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 300}">
                  <p class="text">路线标记设置</p>
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 600}">
                  <p class="text">可视化拖拽</p>
                </div>
                <div class="am-u-sm-4" data-am-scrollspy="{animation: 'fade', delay: 900}">
                  <p class="text">多种模版素材库</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 服务 -->
<div class="xs-service">
  <div class="am-g am-g-fixed">
    <div class="am-u-sm-10 am-u-sm-centered">
      <div class="am-g am-g-collapse">
        <div class="am-u-sm-4">
          <img src="assets/image/s1.png" alt="" class="img-1">
          <p class="title">10+</p>
          <p class="text">智慧城市</p>
        </div>
        <div class="am-u-sm-4 am-padding-top-xs">
          <img src="assets/image/s2.png" alt="" class="img-2">
          <p class="title">50+</p>
          <p class="text">文化景区</p>
        </div>
        <div class="am-u-sm-4">
          <img src="assets/image/s3.png" alt="" class="img-3">
          <p class="title">190+</p>
          <p class="text">博物馆展览</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 底部 -->
<footer class="xs-footer">
  <div class="am-g am-g-fixed">
    <ul class="am-avg-sm-5">
      <li>
        <img src="assets/image/logo.png" alt="" class="am-img-responsive logo-img am-margin-bottom-xl">
        <p class="text">咨询热线：+86 0592 3558856</p>
        <p class="text">电子邮箱：service@lixiaoqian.cn</p>
      </li>
      <li>
        <h3 class="am-margin-bottom-xl">了解小签</h3>
        <p class="text">关于小签</p>
        <p class="text">联系小签</p>
      </li>
      <li>
        <h3 class="am-margin-bottom-xl">AR出行产品线</h3>
        <p class="text">AR行产品</p>
        <p class="text">展馆AR导览产品</p>
        <p class="text">室内AR实景导航产品</p>
      </li>
      <li>
        <h3 class="am-margin-bottom-xl">适用场景案例</h3>
        <p class="text">景区/景点</p>
        <p class="text">文化社区/智慧城市</p>
        <p class="text">展馆/展览</p>
        <p class="text">文创/智能文化店</p>
        <p class="text">机场/商业中心</p>
        <p class="text">AR体验馆</p>
      </li>
      <li>
        <h3 class="am-margin-bottom-xl">关注公众号</h3>
        <img src="assets/image/we-qr.png" alt="" class="am-img-responsive">
      </li>
    </ul>

    <div class="hr"></div>

    <p class="am-text-sm">© 2015-2018 小签科技  版权所有</p>

    <div class="contact">
      <div class="contact-box">
        <img src="assets/image/tel.png" alt="电话" class="am-img-responsive">
      </div>
      <div class="hr"></div>
      <div class="contact-box">
        <img src="assets/image/email.png" alt="邮箱" class="am-img-responsive">
      </div>
      <div class="hr"></div>
      <div class="contact-box">
        <img src="assets/image/weChat-s.png" alt="微信" class="am-img-responsive">
      </div>
    </div>

    <!-- 返回顶部 -->
    <div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
      <a href="#top" title="">
        <img class="am-gotop-icon-custom" src="assets/image/gotop.png" />
      </a>
    </div>

  </div>

</footer>

<!-- 视频 -->
<div class="am-modal am-modal-no-btn" tabindex="-1" id="video">
  <div class="am-modal-dialog">
    <a href="javascript: void(0)" class="am-close am-close-spin xs-video-clone" data-am-modal-close>&times;</a>
    <video id="example_video_1" class="video-js vjs-amazeui" controls preload="none" width="640" height="364"
           poster="http://video-js.zencoder.com/oceans-clip.png"
           data-setup="{}">
      <source src="https://apd-10d9fdd9ed8189402dfe0718aa03423f.v.smtcdns.com/video.dispatch.tc.qq.com/AsBqXUOmgNDI3IW2HO9HbMxBI-tWfULnAhfO1VneAcY8/x17867e4mxe.mp4?vkey=2666CDC323A355B0F03D29BF603C03ABC16A6134A5A3496DCC5DE3685C5E387CC6A2A1C43A8B26A1C2B5A8B8E6051C48351B4420A34F058043377C336F1E5E0EB59E40CAC5B492C892B2A1420E05108A95A4AD835494ED19D4BB7521FE4ADD9988AD85B37B8D861F512ACC7A76C7332F&sdtfrom=v1095&guid=b86a0709c516a1c45d5e77b2ed568fc0" type='video/mp4' />

      <track kind="captions" src="assets/fonts/demo.captions.vtt" srclang="en" label="English" /><!-- Tracks need an ending tag thanks to IE9 -->
      <track kind="subtitles" src="assets/fonts/demo.captions.vtt" srclang="en" label="English" /><!-- Tracks need an ending tag thanks to IE9 -->
      <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
    </video>
  </div>
</div>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!--<![endif]-->
<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script src="assets/js/swiper.animate1.0.3.min.js"></script>
<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/video.js"></script>
<script> videojs.options.flash.swf = "assets/fonts/video-js.swf"; </script>

<script>
  $(function () {
    //  初始轮播
    var mySwiper = new Swiper ('.swiper-container', {
      direction: 'horizontal', // 水平切换选项
      loop: true, // 循环模式选项
      autoHeight: true, //高度随内容变化
      // 自动切换
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },

      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        type: 'custom',
        renderCustom: function (swiper, current, total) {
          var _html = '';
          for (var i = 1; i <= total; i++) {
            if (current === i) {
              _html += '<li class="bar-unfill"><span class="am-animation-bar-fill"></span></li>';
            }else{
              _html += '<li class="bar-unfill"></li>';
            }
          }
          return _html;//返回所有的页码html
        }
      },
      on:{
        init: function(){
          swiperAnimateCache(this); //隐藏动画元素
          swiperAnimate(this); //初始化完成开始动画
        },
        slideChangeTransitionEnd: function(){
          swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
          //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
        }
      }
    });

    $('.swiper-pagination').on('click','li',function () {
      var index= $(this).index();
      mySwiper.slideTo(index+1, 500, true);//切换
    })

    // 加载gif的动画
    $('#column2-1').on('inview.scrollspy.amui', function() {
      $("#column-gif").html('<img src="assets/image/column2-1.gif" alt="" class="am-img-responsive">')
    }).on('outview.scrollspy.amui', function() {
      $("#column-gif > img ").remove();
    });
  })
</script>

</body>
</html>